<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {getCurrency, timeFormat} from "@/utils";
import {useFullscreen} from "@vueuse/core";
import CountUp from 'vue-countup-v3'

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const time = ref('')
const old = ref({})

const { toggle: toggleFullscreen, isFullscreen } = useFullscreen()

const digitSplitting = (num: number, separator = '.') => {
  return num?.toString()?.split(separator) || [0,0]
}

watch(()=>props.data,(newVal,oldVal)=>{
  if(oldVal?.length){
    old.value = oldVal
  }
},{
  deep:true,
  immediate:true
})

onMounted(()=>{
  setInterval(()=>{
    time.value = new Date().getTime()
  },1000)
})
</script>

<template>
<div>
  <div class="flex justify-center relative">
    <div class="w-[215px] h-[30px] absolute left-0 top-[10px] time flex items-center pl-[8px]">
      <img class="w-[16px] h-[16px] mr-[8px]" src="@/assets/img/icon/ic_shijian.png">
      <div class="text-[16px] text-[#fff]">{{ timeFormat(time,'yyyy-mm-dd hh:MM:ss') }}</div>
    </div>
    <div class="flex items-center">
      <img class="w-[40px] h-[40px] mr-[14px]" src="@/assets/img/icon/ic_logo.png">
      <div class="text-[32px] ff-DingTalk font-medium text-[#fff]">京瑞居直播数据驾驶舱</div>
    </div>
    <div v-if="!isFullscreen" class="w-[88px] h-[30px] absolute right-0 top-[10px] tc flex items-center pl-[20px] cursor-pointer" @click="toggleFullscreen">
      <img class="w-[16px] h-[16px] mr-[8px]" src="@/assets/img/icon/ic_qp.png">
      <div class="text-[16px] text-[#fff]">全屏</div>
    </div>
    <div v-else class="w-[88px] h-[30px] absolute right-0 top-[10px] tc flex items-center pl-[20px] cursor-pointer" @click="toggleFullscreen">
      <img class="w-[16px] h-[16px] mr-[8px]" src="@/assets/img/icon/ic_tc.png">
      <div class="text-[16px] text-[#fff]">退出</div>
    </div>
  </div>
  <div class="w-[960px] h-[408px] mt-[44px] pt-[30px] bg">
    <div class="text-[24px] text-[#fff] flex justify-center">直播间累计成交金额</div>
    <div class="text-[72px] text-[#fff] font-black flex justify-center ff-Avenir">
      <count-up
          :start-val="old.price_all"
          :end-val="data.price_all"
          :duration="1"
          :decimal-places="2"
          :options="{
            useGrouping:true
          }"></count-up>
<!--      {{ getCurrency(data.price_buy) }}-->
    </div>
    <div class="flex mt-[30px]">
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">总成交单量</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ data.num }}</div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">总成交人数</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ data.person_buy }}</div>
      </div>
<!--      <div class="flex-1 flex flex-col items-center">-->
<!--        <div class="text-[20px] text-[#fff]">成交转化率</div>-->
<!--        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(data.rate_buy)[0] }}<span class="text-[20px]">.{{ digitSplitting(data.rate_buy)[1] }}%</span></div>-->
<!--      </div>-->
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">千次观看成交金额</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(getCurrency(data.t_buy))[0] }}<span class="text-[20px]">.{{digitSplitting(getCurrency(data.t_buy))[1]}}</span></div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">订单均价</div>
        <div class="text-[34px] text-[#fff] ff-Avenir"><span class="text-[20px]">¥</span>{{ digitSplitting(data.price_avg)[0] }}<span class="text-[20px]">.{{ digitSplitting(data.price_avg)[1] }}</span></div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">成交老粉占比</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(data.rate_old)[0] }}<span class="text-[20px]">.{{ digitSplitting(data.rate_old)[1] }}%</span></div>
      </div>
    </div>
    <div class="flex mt-[22px]">
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">平均在线人数</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ data.person_now }}</div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">累计观看人数</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(data.person_all_w)[0] }}<span class="text-[20px]">.{{ digitSplitting(data.person_all_w)[1] }}万</span></div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">累计增长粉丝数</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(getCurrency(data.person_fans))[0] }}</div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">人均观看时长</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ data.see }}<span class="text-[20px]">s</span></div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="text-[20px] text-[#fff]">UV价值</div>
        <div class="text-[34px] text-[#fff] ff-Avenir">{{ digitSplitting(data.uv)[0] }}<span class="text-[20px]">.{{ digitSplitting(data.uv)[1] }}</span></div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.time{
  background: url("@/assets/img/icon/ic_time.png") 0 0 /100% 100% no-repeat;
}
.tc{
  background: url("@/assets/img/icon/ic_tc_bg.png") 0 0 /100% 100% no-repeat;
}
.bg{
  background: url("@/assets/img/icon/ic_bg.png") 0 0 /100% 100% no-repeat;
}
</style>
